import React from 'react';
import { Row, Col, Card, Statistic, Table, Progress } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, UserOutlined, ShoppingCartOutlined, DollarOutlined, FileOutlined } from '@ant-design/icons';

const Dashboard = () => {
  // 模拟数据
  const tableData = [
    {
      key: '1',
      name: '商品 A',
      price: 32.5,
      sales: 120,
      stock: 65,
    },
    {
      key: '2',
      name: '商品 B',
      price: 42.0,
      sales: 80,
      stock: 32,
    },
    {
      key: '3',
      name: '商品 C',
      price: 28.0,
      sales: 150,
      stock: 5,
    },
    {
      key: '4',
      name: '商品 D',
      price: 99.0,
      sales: 50,
      stock: 55,
    },
  ];

  const columns = [
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      render: (price) => `¥${price}`,
    },
    {
      title: '销量',
      dataIndex: 'sales',
      key: 'sales',
      sorter: (a, b) => a.sales - b.sales,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
      render: (stock) => (
        <Progress
          percent={(stock / 100) * 100}
          size="small"
          status={stock < 10 ? 'exception' : 'normal'}
          format={() => stock}
        />
      ),
    },
  ];

  return (
    <div>
      <h1>仪表盘</h1>
      <Row gutter={16}>
        <Col span={6}>
          <Card>
            <Statistic
              title="用户总数"
              value={1128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="订单总数"
              value={93}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日销售额"
              value={11280}
              prefix={<DollarOutlined />}
              suffix="¥"
              precision={2}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="销售增长"
              value={11.28}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
      </Row>

      <div style={{ marginTop: 24 }}>
        <Card title="热销商品" bordered={false}>
          <Table columns={columns} dataSource={tableData} size="middle" />
        </Card>
      </div>
    </div>
  );
};

export default Dashboard; 